<template>
<div id="assign-role">
    <div v-if="uid" class="assign-role">
        <h3 class="assign-role-title">分配角色 - {{uid}}</h3>
        <ul class="assign-role-ul">
            <li class="assign-role-li">
                <span>当前的用户：</span>
                <span>{{username}}</span>
            </li>
            <li class="assign-role-li">
                <span>当前的角色：</span>
                <span>{{role}}</span>
            </li>
            <li class="assign-role-li">
                <span>分配新角色：</span>
                <select v-model="selected" class="selected">
                    <option value="-1" disabled selected>--请选择--</option>
                    <option 
                        v-for="item in roleName"
                        :key="item.rid"
                        :value="item.name"
                    >{{item.name}}</option>
                </select>
            </li>
        </ul>
        <div class="assign-role-footer">
            <my-button
                :type="'back'"
                class="back"
                :link="true"
                :to="{name: 'userList'}"
            >取消</my-button>
            <my-button
                :type="'save'"
                class="save"
                @click.native="handleClickSaveRole"
            >保存</my-button>
        </div>
    </div>
    <div v-else class="assign-role">
        <h3>缺少参数</h3>
        <router-link :to="{name: 'userList'}">跳转到 用户列表</router-link>
    </div>
</div>
</template>

<script>
import { roleList, saveAssignRole } from '../../config/data'
export default {
    name: "assignRole",
    props: ["uid", "username", "role"],
    data() {
        return {
            roleList: [],
            selected: "-1"
        }
    },
    created() {
        this.getRoleTreeData()
    },
    methods: {
        async handleClickSaveRole() {
            let result = await saveAssignRole({
                uid: this.uid,
                roleName: this.selected
            })
            if(result.fsBool) {
                setTimeout(_ => {
                    this.$router.push({name: "userList"})
                }, 300)
            }
        },
        async getRoleTreeData() {
            let result = await roleList()
            this.roleList = result.data.roleList
        }
    },
    computed: {
        roleName() {
            return this.roleList.map(role => ({rid: role.rid, name: role.roleName}))
        }
    },
}
</script>

<style scoped>
#assign-role,
.assign-role {
    height: 100%;
}
.assign-role-title,
.assign-role-footer {
    height: 50px;
    line-height: 50px;
}
.assign-role-ul {
    height: calc(100% - 50px - 50px);
    padding-left: 50px;
}
.assign-role-li {
    padding: 20px;
}
.selected {
    padding: 6px 12px;
    text-align: center;
    text-align-last: center;
    margin: 0;
    border: none;
    outline: none;
    border: 1px solid #cecece;
}
.assign-role-footer {
    display: flex;
    align-items: center;
}
.assign-role-footer .back, 
.assign-role-footer .save {
    margin: 0 12px;
}
</style>